<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="250px" style="background-color: #03174a;">
                <div class="mb-2"><span class="oa">OA</span> 协同办公</div>
                <el-menu active-text-color="#ffd04b" background-color="#03174a" class="el-menu-vertical-demo" :collapse="flag"
                    default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                    <el-menu-item index="/home/workbench">
                        <el-icon><PieChart /></el-icon>
                        <span>工作台</span>
                    </el-menu-item>
                    <el-sub-menu :index="index.toString()" v-for="(item,index) in routerArr" :key="index">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item :index="/home/+item1.path" v-for="(item1,index1) in item.children" :key="index1">{{item1.name }}</el-menu-item>
                    </el-sub-menu>
                    
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-row :gutter="10">
                        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                            <div @click="checkFlag">
                                <el-icon size="20" v-show="flag==false"><Expand /></el-icon>
                                <el-icon size="20"  v-show="flag==true"><Fold /></el-icon>
                            </div>
                        </el-col>
                        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                            <el-icon size="20" @click="refreshHome"><RefreshRight /></el-icon>
                        </el-col>
                        <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
                            
                        </el-col>
                        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                            <el-icon size="20"><Key /></el-icon>
                        </el-col>
                        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                            <el-icon size="20"><Bell /></el-icon>
                        </el-col>
                        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                            <el-icon size="20"><User /></el-icon>
                            <span class="textName">admin</span> 
                            <el-icon size="20"><ArrowDownBold /></el-icon>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref,Ref} from "vue"
import {useRouter} from "vue-router"
const flag:Ref<boolean>=ref(false)
let routerArr:any=ref([])
const checkFlag=()=>{
    flag.value=!flag.value
}
const refreshHome=()=>{
    window.location.reload();
}
const router:any=useRouter().options.routes[0].children
onMounted(()=>{
    routerArr.value=router.filter((item:any)=>{
        return item.meta.info==true
    })
    console.log(routerArr.value);
    // let arrRouter=routerArr.filter((item:any)=>{
    //     return item.meta.info==true
    // })
    // console.log(arrRouter);
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<style scoped lang="scss">
.common-layout{
    height: 100%;
    overflow: auto;
    .el-container{
        height: 100%;
        .el-aside{
            .mb-2{
                font-size: 26px;
                margin: 20px auto;
                text-align: center;
                color: #fff;
                .oa{
                    color: #ff4949;
                }
            }
            
        }
    }
    .el-container{
            .el-header{
            padding: 0;
            line-height: 60px;
            .textName{
                display: inline-block;
                line-height: 60px;
                padding: 0 5px;
            }
        }
        .el-main{
            padding: 0;
            width: 1300px;
        }
    }
}
</style>